{% comment %} <script src="{{ 'kiks-horizontal-scroll.js' | asset_url }}" defer></script>
<script src="{{ 'kiks-number-animation.js' | asset_url }}" defer></script> {% endcomment %}
{%- assign section_identifier = '#shopify-section-' | append: section.id -%}
{%- style -%}
 .kiks-rokid-max-new .hero-block {
    opacity: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
  }
  .kiks-rokid-max-new .hero-block.scrolled-active {
    opacity: 1;
    transition: opacity 0.5s ease-out;
  }
  .kiks-rokid-max-new .hero-background {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
  }
{%- endstyle -%}

<horizontal-scroll>
  {%- for block in section.blocks -%}
    {% case block.type %}
      {% when 'hero_block' %}
        <div class="hero-block" {{ block.shopify_attributes }}>
          <div class="hero-background">
            {% if block.settings.background_image != blank %}
              <div class="desktop-only">
                {{ block.settings.background_image | image_url: width: 3000 | image_tag:
                  loading: 'eager',
                  width: block.settings.background_image.width,
                  height: block.settings.background_image.height,
                  class: 'desktop-image'
                }}
              </div>
            {% endif %}

            {% if block.settings.mobile_background_image != blank %}
              <div class="mobile-only">
                {{ block.settings.mobile_background_image | image_url: width: 1000 | image_tag:
                  loading: 'eager',
                  width: block.settings.mobile_background_image.width,
                  height: block.settings.mobile_background_image.height,
                  class: 'mobile-image'
                }}
              </div>
            {% elsif block.settings.background_image != blank %}
              <div class="mobile-only">
                {{ block.settings.background_image | image_url: width: 1000 | image_tag:
                  loading: 'eager',
                  width: block.settings.background_image.width,
                  height: block.settings.background_image.height,
                  class: 'mobile-image'
                }}
              </div>
            {% endif %}
          </div>
         <div class="hero-text-contianer container">
             <div class="hero-content">
                {% if block.settings.subtitle != blank %}
                <p class="hero-subtitle">{{ block.settings.subtitle }}</p>
                {% endif %}
                
                {% if block.settings.title != blank %}
                <h1 class="hero-title section-title">{{ block.settings.title }}</h1>
                {% endif %}

                {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <div class="hero-cta">
                    <a href="{{ block.settings.button_link }}" class="{% if settings.enable_solid_primary_button %}kiks-btn-primary {% else %}primary-button{% endif %}btn">
                    {{ block.settings.button_label }}
                    </a>
                </div>
                {% endif %}
            </div>
         </div>
        </div>
      {% when 'custom_block' %}
        <div class="media-block" {{ block.shopify_attributes }} style="background-color: {{ block.settings.background_color }}; color: {{ block.settings.text_color }};">
            <div class="media-block-container">
              <div class="media-content-container">
                <div class="media-text-content">
                  <h2 class="section-title">{{ block.settings.main_title }}</h2>
                  <div class="media-description">{{ block.settings.main_description }}</div>
                </div>
            
            <div class="media-visual-content">
              {% if block.settings.video_shopify != blank %}
                <div class="video-container desktop-only">
                  {{ block.settings.video_shopify | video_tag: 
                    controls: block.settings.enable_video_controls,
                    image_size: "1024x",
                    autoplay: true,
                    loop: true,
                    muted: true,
                    class: "video-player"
                  }}
                </div>
              {% elsif block.settings.video_url != blank %}
                <div class="video-container desktop-only">
                  {% if block.settings.video_url contains "youtube.com" or block.settings.video_url contains "youtu.be" %}
                    <iframe 
                      src="{{ block.settings.video_url | replace: 'watch?v=', 'embed/' }}?autoplay=1&mute=1&loop=1&playlist={{ block.settings.video_url | split: 'v=' | last }}&playsinline=1"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen
                      style="object-fit: {{ block.settings.video_cover_style }};"
                    ></iframe>
                  {% elsif block.settings.video_url contains "vimeo.com" %}
                    <iframe 
                      src="{{ block.settings.video_url | replace: 'vimeo.com', 'player.vimeo.com/video' }}?background=1&autoplay=1&loop=1&byline=0&title=0"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen
                      style="object-fit: {{ block.settings.video_cover_style }};"
                    ></iframe>
                  {% endif %}
                </div>
              {% endif %}
              
              {% if block.settings.video_shopify_mobile != blank %}
                <div class="video-container mobile-only">
                  {{ block.settings.video_shopify_mobile | video_tag: 
                    controls: block.settings.enable_video_controls,
                    image_size: "800x",
                    autoplay: true,
                    loop: true,
                    muted: true,
                    class: "video-player",
                    style: "object-fit: " | append: block.settings.video_cover_style | append: ";"
                  }}
                </div>
              {% elsif block.settings.video_shopify != blank %}
                <div class="video-container mobile-only">
                  {{ block.settings.video_shopify | video_tag: 
                    controls: block.settings.enable_video_controls,
                    image_size: "800x",
                    autoplay: true,
                    loop: true,
                    muted: true,
                    class: "video-player"
                    
                  }}
                </div>
              {% elsif block.settings.video_url != blank %}
                <div class="video-container mobile-only">
                  {% if block.settings.video_url contains "youtube.com" or block.settings.video_url contains "youtu.be" %}
                    <iframe 
                      src="{{ block.settings.video_url | replace: 'watch?v=', 'embed/' }}?autoplay=1&mute=1&loop=1&playlist={{ block.settings.video_url | split: 'v=' | last }}&playsinline=1"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen
                      style="object-fit: {{ block.settings.video_cover_style }};"
                    ></iframe>
                  {% elsif block.settings.video_url contains "vimeo.com" %}
                    <iframe 
                      src="{{ block.settings.video_url | replace: 'vimeo.com', 'player.vimeo.com/video' }}?background=1&autoplay=1&loop=1&byline=0&title=0"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                      allowfullscreen
                      style="object-fit: {{ block.settings.video_cover_style }};"
                    ></iframe>
                  {% endif %}
                </div>
              {% endif %}

              {% if block.settings.floating_image != blank %}
                <div class="floating-image {% if block.settings.floating_image_position == 'right' %}float-right{% else %}float-left{% endif %}">
                  {{ block.settings.floating_image | image_url: width: 600 | image_tag:
                    loading: 'lazy',
                    width: block.settings.floating_image.width,
                    height: block.settings.floating_image.height,
                    class: 'floating-img'
                  }}
                </div>
              {% endif %}
               {% if block.settings.caption_content != blank %}
              <div class="media-caption">
                 {%- if block.settings.caption_content != blank -%}
                    <div class="caption-content">
                    <h5>{{ block.settings.caption_content }}</h5>
                    </div>
                {%- endif -%}
              </div>
              {%- style -%}
                  {{ section_identifier }} span.highlighter {
                        color: {{ block.settings.highlighter_color }};
                    }
              {%- endstyle -%}
            {% endif %}
            </div>
            </div>
          </div>
        </div>
      {% when 'feature_block' %}
        <div class="feature-block" {{ block.shopify_attributes }} style="background-color: {{ block.settings.background_color }}; color: {{ block.settings.text_color }};">
          <div class="feature-background">
            {% if block.settings.main_image != blank %}
              {{ block.settings.main_image | image_url: width: 2400 | image_tag:
                loading: 'lazy',
                width: block.settings.main_image.width,
                height: block.settings.main_image.height,
                class: 'main-feature-img'
              }}
            {% endif %}
          </div>
          
          <div class="feature-text-container {% if block.settings.image_position == 'left' %}ml-auto{% else %}mr-auto{% endif %}">
            <div class="feature-text-content">
               {%- if block.settings.main_image_mobile != blank -%}
                <div class="feature-mobile-image d-none">
                    {{ block.settings.main_image_mobile | image_url: width: 2400 | image_tag:
                        loading: 'lazy',
                        width: block.settings.main_image_mobile.width,
                        height: block.settings.main_image_mobile.height,
                        class: 'main-feature-img'
                    }}
                </div>
                {%- elsif block.settings.main_image != blank -%}
                <div class="feature-mobile-image d-none">
                    {{ block.settings.main_image | image_url: width: 2400 | image_tag:
                        loading: 'lazy',
                        width: block.settings.main_image.width,
                        height: block.settings.main_image.height,
                        class: 'main-feature-img'
                    }}
                </div>
                {%- endif -%}
            {% if block.settings.title != blank %}
              <h2 class="section-title">{{ block.settings.title }}</h2>
            {% endif %}

            {% if block.settings.description != blank %}
              <div class="feature-description">{{ block.settings.description }}</div>
            {% endif %}

            <div class="feature-icons">
              {% if block.settings.icon_1 != blank %}
                <div class="icon-column">
                  {{ block.settings.icon_1 | image_url: width: 64 | image_tag:
                    loading: 'lazy',
                    width: 32,
                    height: 32,
                    class: 'icon-image'
                  }}
                  <p class="icon-text">{{ block.settings.icon_text_1 }}</p>
                </div>
              {% endif %}

              {% if block.settings.icon_2 != blank %}
                <div class="icon-column">
                  {{ block.settings.icon_2 | image_url: width: 64 | image_tag:
                    loading: 'lazy',
                    width: 32,
                    height: 32,
                    class: 'icon-image'
                  }}
                  <p class="icon-text">{{ block.settings.icon_text_2 }}</p>
                </div>
              {% endif %}

              {% if block.settings.icon_3 != blank %}
                <div class="icon-column">
                  {{ block.settings.icon_3 | image_url: width: 64 | image_tag:
                    loading: 'lazy',
                    width: 32,
                    height: 32,
                    class: 'icon-image'
                  }}
                  <p class="icon-text">{{ block.settings.icon_text_3 }}</p>
                </div>
              {% endif %}
            </div>
          </div>
          </div>
        </div>
      {% when 'media_content_block' %}
        <div class="media-content-block" {{ block.shopify_attributes }} style="background-color: {{ block.settings.background_color }}; color: {{ block.settings.text_color }};">
          <div class="media-content-container">
            <div class="media-content-grid">
              <div class="media-content-text">
                {% if block.settings.subtitle != blank %}
                  <div class="media-content-subtitle">{{ block.settings.subtitle }}</div>
                {% endif %}
                
                {% if block.settings.title != blank %}
                  <h2 class="section-title">{{ block.settings.title }}</h2>
                {% endif %}

                {% if block.settings.description != blank %}
                  <div class="media-content-description">{{ block.settings.description }}</div>
                {% endif %}
              </div>

              <div class="media-content-visual">
                <div class="number-overlay" 
                  data-start="{{ block.settings.number_start | default: 0 }}"
                  data-target="{{ block.settings.number_value | split: '.' | first | default: '6' }}"
                  data-decimals="{{ block.settings.number_value | split: '.' | last | default: '00' }}">
                  {% if block.settings.number_sign != 'none' %}
                    <span class="sign">{{ block.settings.number_sign | default: 'minus' | replace: 'minus', '-' | replace: 'plus', '+' }}</span>
                  {% endif %}<span class="number">{{ block.settings.number_start | default: 0 }}</span><span class="decimal">.{{ block.settings.number_value | split: '.' | last | default: '00' }}</span>
                  <span class="unit">{{ block.settings.number_unit | default: 'D' }}</span>
                </div>
                {% if block.settings.main_image != blank %}
                  {{ block.settings.main_image | image_url: width: block.settings.main_image.width | image_tag:
                    loading: 'lazy',
                    sizes: 'min(100vw, 560px)',
                    widths: '200,300,400,500,600,800,1000,1200,1400,1600',
                    class: 'media-content-image'
                  }}
                {% elsif block.settings.video_shopify != blank %}
                  <div class="video-container desktop-only">
                    {{ block.settings.video_shopify | video_tag:
                      class: 'media-video',
                      controls: block.settings.enable_video_controls,
                      autoplay: true,
                      loop: true,
                      muted: true,
                      playsinline: true
                    }}
                  </div>
                  {% if block.settings.video_shopify_mobile != blank %}
                    <div class="video-container mobile-only">
                      {{ block.settings.video_shopify_mobile | video_tag:
                        class: 'media-video',
                        controls: block.settings.enable_video_controls,
                        autoplay: true,
                        loop: true,
                        muted: true,
                        playsinline: true
                      }}
                    </div>
                  {% else %}
                    <div class="video-container mobile-only">
                      {{ block.settings.video_shopify | video_tag:
                        class: 'media-video',
                        controls: block.settings.enable_video_controls,
                        muted: true
                      }}
                    </div>
                  {% endif %}
                {% elsif block.settings.video_url != blank %}
                  {% if block.settings.video_url contains "youtube.com" or block.settings.video_url contains "youtu.be" %}
                    <iframe
                      class="media-video"
                      src="{{ block.settings.video_url | replace: 'watch?v=', 'embed/' }}?enablejsapi=1&controls={{ block.settings.enable_video_controls }}&mute=1"
                      allow="autoplay; encrypted-media"
                      allowfullscreen
                    ></iframe>
                  {% elsif block.settings.video_url contains "vimeo.com" %}
                    <iframe
                      class="media-video"
                      src="{{ block.settings.video_url | replace: 'vimeo.com', 'player.vimeo.com/video' }}?api=1&controls={{ block.settings.enable_video_controls }}&background=0"
                      allow="autoplay; encrypted-media"
                      allowfullscreen
                    ></iframe>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        </div>
    {% endcase %}
  {%- endfor -%}
</horizontal-scroll>

{% schema %}
{
  "name": "Horizontal Scroll Section",
  "tag": "section",
  "class": "kiks-rokid-max-new",
  "max_blocks": 6,
  "blocks": [
    {
      "type": "media_content_block",
      "name": "Media Content Block",
      "settings": [
        {
          "type": "text",
          "id": "number_value",
          "label": "Number Value",
          "default": "6.00",
          "info": "The number to display in the overlay (e.g. 6.00)"
        },
        {
          "type": "text",
          "id": "number_unit",
          "label": "Number Unit",
          "default": "D",
          "info": "The unit to display after the number (e.g. D)"
        },
        {
          "type": "number",
          "id": "number_start",
          "label": "Animation Start Value",
          "default": 0,
          "info": "The number to start the animation from"
        },
        {
          "type": "select",
          "id": "number_sign",
          "label": "Number Sign",
          "options": [
            {
              "value": "none",
              "label": "None"
            },
            {
              "value": "minus",
              "label": "Minus (-)"
            },
            {
              "value": "plus",
              "label": "Plus (+)"
            }
          ],
          "default": "minus"
        },
        {
          "type": "image_picker",
          "id": "main_image",
          "label": "Main Image",
          "info": "Will be displayed if no video is selected"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Subtitle",
          "default": "Introducing"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Adjust. See. Enjoy."
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>With built-in myopia adjustment (0.00D to -6.00D), anyone in your household can enjoy a tailored view. Dial in your vision—no inserts, no hassle.</p>"
        },
        {
          "type": "video",
          "id": "video_shopify",
          "label": "Video upload (Desktop)",
          "info": "Hosted by Shopify. Replaces External video if both are set."
        },
        {
          "type": "video",
          "id": "video_shopify_mobile",
          "label": "Video upload (Mobile)",
          "info": "Optional. If not set, desktop video will be used on mobile."
        },
        {
          "type": "text",
          "id": "video_url",
          "label": "External video",
          "info": "Supports [YouTube](https://youtubeembedcode.com/en/) and [Vimeo](https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos)."
        },
        {
          "type": "checkbox",
          "id": "enable_video_controls",
          "label": "Enable Video Controls",
          "default": false
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        }
      ]
    },
    {
      "type": "hero_block",
      "name": "Hero Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "background_image",
          "label": "Desktop Background Image",
          "info": "2000 x 1200px recommended"
        },
        {
          "type": "image_picker",
          "id": "mobile_background_image",
          "label": "Mobile Background Image",
          "info": "750 x 1100px recommended"
        },
        {
          "type": "text",
          "id": "subtitle",
          "label": "Subtitle",
          "default": "Introducing Max 2 AR Glasses"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Step Into a 215-Inch Reality"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label",
          "default": "Discover The Future Of AR"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    },
    {
      "type": "custom_block",
      "name": "Media Feature Block",
      "settings": [
        {
          "type": "text",
          "id": "main_title",
          "label": "Main Title",
          "default": "Work-Life Balance With Joy"
        },
        {
          "type": "richtext",
          "id": "main_description",
          "label": "Main Description",
          "default": "<p>Whether you're watching movies, working remotely, or gaming, it's all bigger and better with Max 2.</p>"
        },
        {
            "type": "textarea",
            "id": "caption_content",
            "label": "Caption Content",
            "info": "This content will be displayed below the slider. To Use the highlighter (<span class='highlighter'>high light me</span>)",
            "default": "<p>Organize content into multiple columns to share useful information to your customers about your products, values...</p>"
        },
         {
            "type": "color",
            "id": "highlighter_color",
            "label": "Highlighter color",
            "default": "#f0c040"
        },
        {
          "type": "image_picker",
          "id": "floating_image",
          "label": "Floating Image (Product)",
          "info": "600 x 600px recommended"
        },
        {
          "type": "select",
          "id": "floating_image_position",
          "label": "Floating Image Position",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "right"
        },
        {
          "type": "video",
          "id": "video_shopify",
          "label": "Video upload (Desktop)",
          "info": "Hosted by Shopify. Replaces External video if both are set."
        },
        {
          "type": "video",
          "id": "video_shopify_mobile",
          "label": "Video upload (Mobile)",
          "info": "Optional. If not set, desktop video will be used on mobile."
        },
        {
          "type": "text",
          "id": "video_url",
          "label": "External video",
          "info": "Supports [YouTube](https://youtubeembedcode.com/en/) and [Vimeo](https://help.vimeo.com/hc/en-us/articles/12426486963857-Autoplay-and-loop-embedded-videos)."
        },
        {
          "type": "checkbox",
          "id": "enable_video_controls",
          "label": "Enable Video Controls",
          "default": false
        },
        {
          "type": "select",
          "id": "video_cover_style",
          "label": "Video Cover Style",
          "options": [
            {
              "value": "contain",
              "label": "Fit"
            },
            {
              "value": "cover",
              "label": "Fill"
            }
          ],
          "default": "cover"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        }
      ]
    },
    {
      "type": "feature_block",
      "name": "Feature Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "main_image",
          "label": "Main Image",
          "info": "1200 x 800px recommended"
        },
        {
          "type": "image_picker",
          "id": "main_image_mobile",
          "label": "Mobile Image",
          "info": "Will be displayed if no video is selected"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Superior Audio Experience"
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>Integrated HD directional speakers and noise-canceling microphones provide clear audio for media consumption and voice interactions, ensuring an immersive and uninterrupted experience.</p>"
        },
        {
          "type": "image_picker",
          "id": "icon_1",
          "label": "First Icon"
        },
        {
          "type": "text",
          "id": "icon_text_1",
          "label": "First Icon Text",
          "default": "HD Directional Speaker"
        },
        {
          "type": "image_picker",
          "id": "icon_2",
          "label": "Second Icon"
        },
        {
          "type": "text",
          "id": "icon_text_2",
          "label": "Second Icon Text",
          "default": "Noise-canceling Microphone"
        },
        {
          "type": "image_picker",
          "id": "icon_3",
          "label": "Third Icon"
        },
        {
          "type": "text",
          "id": "icon_text_3",
          "label": "Third Icon Text",
          "default": "AI Voice Control"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background Color",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "text_color",
          "label": "Text Color",
          "default": "#000000"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Horizontal Scroll",
      "blocks": [
        {
          "type": "hero_block"
        },
        {
          "type": "custom_block"
        }
      ]
    }
  ]
}
{% endschema %}

